import React, { useState, useEffect } from "react";
import { Card, Input, Button, Spin, message } from "antd";
import Lbxins from "../../api/lbxin";

import "./login.less"
import { withRouter } from "react-router-dom";

const Login: React.FunctionComponent = (props:any): any => {
  const [userName, setUserName] = useState("admin");
  const [password, setPassword] = useState("admin123");
  const [isLoading, setIsLoading] = useState(false);
  const checkLogin = ()=>{
    setIsLoading(true)
    if(!userName){
        message.error('用户名不能为空')
        return false
    }else if(!password){
        message.error('密码不能为空')
        return false
    }
    let dataProps = {
        'userName':userName,
        'password':password
    }
    Lbxins.login(dataProps)
      .then((res:any) => {
        // res.data.map((res: { [x: string]: boolean }) => {
        //   return res["CardToolTipShow"] = false;
        // });
        sessionStorage.setItem("Authorization",btoa(res.token))
        message.success(res.data)
        props.history.replace("/home")
      })
      .catch(err => {
        console.log(err, "log-err");
      });

    setTimeout(()=>{
        setIsLoading(false)
    },1000)
  }
  useEffect(() => {
    // Lbxins.getData("/default/getShareTopicList")
    //   .then(res => {
    //     // res.data.map((res: { [x: string]: boolean }) => {
    //     //   return res["CardToolTipShow"] = false;
    //     // });
    //     console.log(res,'log-res')
        
    //   })
    //   .catch(err => {
    //     console.log(err, "log-err");
    //   });
    return () => {
      
    }
  }, [])
  return (
    <div className="loginBox">
      <Spin tip="Loading..." spinning={isLoading}>
        <Card
          title="JSPang Blog  System"
          bordered={true}
          style={{ width: 400 }}
        >
        {/* prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />} */}
          <Input
            id="userName"
            value={userName}
            size="large"
            placeholder="Enter your userName"
            onChange={e => {
              setUserName(e.target.value);
            }}
          />
          <br />
          <br />
            {/* prefix={<Icon type="key" style={{ color: "rgba(0,0,0,.25)" }} />} */}
          <Input.Password
            id="password"
            size="large"
            value={password}
            placeholder="Enter your password"
            onChange={e => {
              setPassword(e.target.value);
            }}
          />
          <br />
          <br />
          <br/><br/>
          <Button type="primary" size="large" block onClick={checkLogin} > Login in </Button>
        </Card>
      </Spin>
    </div>
  );
}

export default withRouter(Login);
